<template>
  <div>toRef的使用和特点!</div>
  <h2>state:{{ state }}</h2>
  <h2>name:{{ name }}</h2>
  <h2>age:{{ age }}</h2>
  <button @click="update">更新数据</button>
  <Child :age="age"/>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRef} from 'vue';
import Child from "@/components/child.vue";
export default defineComponent({
  name: 'App',
  components: {Child},
  setup() {
    const state = reactive({
      name: 'guojq',
      age: 30
    })
    //拷贝
    const name = ref(state.name)
    const age = toRef(state, 'age')
    const update = () => {
      name.value += '###'
      age.value += 30
      console.log('update')
    }
    return {
      state,
      name,
      age,
      update
    }
  }
});
</script>

<style>

</style>
